﻿
<Row>
    <RowCol Auto>
        <label class="form-label">Width</label>
        <input type="number" @bind=@width class="form-control" />
    </RowCol>
    <RowCol Auto>
        <label class="form-label">Height</label>
        <input type="number" @bind=@height class="form-control" />
    </RowCol>
</Row>

<Row class="mt-2 mb-2">
    <RowCol Auto>
        <Button BackgroundColor="TablerColor.Primary" OnClick="UpdateSize">Update Size</Button>
    </RowCol>
</Row>

<div style="overflow-x:scroll;overflow-y:hidden">
    <ApexChart TItem="Order"
               Title="Scatter Sample"
               Width="@width"
               Height="@height"
               @ref="chart">

        <ApexPointSeries TItem="Order"
                         Items="orders"
                         SeriesType="@SeriesType.Area"
                         Name="Gross Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
                         OrderByDescending="e=>e.Y" />

        <ApexPointSeries TItem="Order"
                         Items="orders"
                         SeriesType="@SeriesType.Area"
                         Name="Net Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
                         OrderByDescending="e=>e.Y" />
    </ApexChart>
</div>


@code {
    private List<Order> orders { get; set; } = SampleData.GetOrders();
    private ApexChart<Order> chart;
    private int height = 200;
    private int width = 600;

    private async Task UpdateSize()
    {
        await chart.UpdateOptionsAsync(false, false, false);
    }

}